<template>
  <!-- 选择就诊人 -->
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="select_visitor">
      <div class="visitor_list" v-for="item in visitorList" :key="item._id">
        <div class="visitor_information">
          <h2 class="visitor_name">
            {{ item.name }}&nbsp;&nbsp;({{ item.relate }})
          </h2>
          <p class="visitor_id number">
            <span>身份证号</span>
            <span>{{
              item.idcard.replace(/(.{6}).*(.{4})/, "$1********$2")
            }}</span>
          </p>
          <p class="Visit_card_number number">
            <span>就诊卡号</span>
            <span>{{ item.bdcard }}</span>
          </p>
        </div>
        <div class="select">
          <!-- <input type="radio" />{{
            item.relate == "本人" ? "默认卡" : "关系卡"
          }} -->
          <!-- :value="item.relate == '本人' ? '默认卡' : '关系卡'" -->
          <label><input type="radio" :value="item.bdcard" v-model="favItem" />{{
            item.relate == "本人" ? "默认卡" : "关系卡"
          }}</label>
        </div>
      </div>
      <div class="add_visitor" @click="gotoAction">
        <span class="adds">➕</span>
        <span class="addill">添加就诊人</span>
      </div>
    </div>
    <div class="footer">
      <button class="cancellation" @click="backAction()">取消</button>
      <button class="confirm" @click="confirmAction()">确认</button>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      favItem: "",
      data: {},
    };
  },
  computed: {
    ...mapState("doctor", ["visitorList"]),
  },
  methods: {
    backAction() {
      this.$router.back();
    },
    confirmAction() {
      console.log("-----", this.favItem);
      this.visitorList.map((item) => {
        if (item.bdcard == this.favItem) {
          this.data = item;
        }
      });
      this.$store.commit("doctor/visitorInformation", this.data);
      // this.$router.push({
      //   name: "ConfirmRegistrationInformation",
      //   params: { text: "确认挂号信息" },
      // });
      this.$router.back();
    },
    gotoAction() {
      this.$router.push({ name: "FilingInstructions" });
    }
  },
  created() {
    console.log("---就诊人列表---", this.visitorList);
    this.favItem = this.visitorList[0].bdcard;
    // this.visitorList.map((item) => {
    //   if (item.bdcard == this.favItem) {
    //     console.log("选择", item);
    //     this.data = item;
    //   }
    // });
  },
};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}

.select_visitor {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .visitor_list {
    width: vw(342);
    height: vw(200);
    margin: 0 auto;
    margin-top: vw(15);
    margin-bottom: vw(10);
    border-radius: vw(5);
    background-color: #fff;

    .visitor_information {
      background-color: #2ec7c9;
      width: 100%;
      height: vw(154);
      padding-top: vw(25);
      padding-left: vw(20);
      border-radius: vw(5) vw(5) 0 0;
      box-sizing: border-box;

      .visitor_name {
        font-family: "ArialMT", "Arial";
        font-weight: 400;
        font-style: normal;
        color: #333;
        font-size: vw(16);
        margin-bottom: vw(35);
      }

      .number {
        font-family: "ArialMT", "Arial";
        font-weight: 400;
        font-style: normal;
        color: #000;
        font-size: vw(16);
        padding-bottom: vw(25);

        span {
          margin-right: vw(20);
        }
      }
    }

    // 卡
    .select {
      padding-left: vw(20);
      box-sizing: border-box;
      margin-top: vw(15);
      color: #999;
      font-size: vw(16);

      input {
        margin-right: vw(5);
      }
    }
  }

  //添加就诊人
  .add_visitor {
    width: vw(342);
    height: vw(82);
    background-color: #fff;
    margin: 0 auto;
    margin-top: vw(15);
    margin-bottom: vw(100);
    border: vw(1) dashed #ccc;
    position: relative;

    .adds {
      font-size: vw(20);
      color: #999;
      position: absolute;
      border: none;
      left: 50%;
      transform: translateX(-70%);
      top: vw(18);
    }

    .addill {
      font-weight: 400;
      font-style: normal;
      color: #999999;
      font-size: vw(15);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: vw(20);
    }
  }
}

// 页脚
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: vw(56);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  button {
    width: vw(107);
    height: vw(37);
    border-radius: vw(5);
    margin-right: vw(30);
    margin-left: vw(30);
  }

  .cancellation {
    background-color: #fff;
    border: none;
    border: vw(1) solid #2ec7c9;
    color: #333;
  }

  .confirm {
    background-color: #2ec7c9;
    color: #fff;
    border: none;
  }
}
</style>
